<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 300px;
          height: 200px;
          border: 1px solid red;
        }
        .mask {
          /* 添加兼容型前缀 */
          -webkit-mask-image: url("/src/img/css3/star.png");
          /* 图片为上图提供的纯黑色的五角星,图片默认会水平垂直方向重复 */
          mask-image: url("/src/img/css3/star.png");
          /* 可以将以下值修改为 repeat repeat-x repeat-y no-repeat 查看不同效果*/
          mask-repeat: repeat;
        }
      </style>
      <!-- 
        TIP

        mask-repeat 属性定义遮罩图像是否以及如何重复，类似于background-repeat。 

        mask-repeat 属性值	说明	渲染效果
        repeat	默认值，水平和垂直两个方向重复	image-20250525131918052
        repeat-x	水平方向重复	image-20250525132005724
        repeat-y	垂直方向重复	image-20250525132045590
        no-repeat	不重复	image-20250525132133353
      -->
      <div class="box">
        <img src="/src/img/css3/ms.jpg" class="mask" />
      </div>
</body>
</html>